<!-- setup Vue 提供的语法糖，定义 UI 中即可使用 -->
<script setup lang="ts">
import { ref } from 'vue';


const isShow = ref(false)

const age = ref(4)


</script>

<!-- 结构 -->
<template>
  <div>
    <button @click="isShow=!isShow">切换图片显示</button>
  </div>
  <h2>v-show</h2>
  <!-- v-show的本质 是通过修改样式的方式(display:none) 控制显示隐藏，元素始终在页面上存在 -->
  <img v-show="isShow" src="https://img0.baidu.com/it/u=915390012,2855437402&fm=253&fmt=auto&app=138&f=JPEG?w=750&h=500" alt="">

  <h2>v-if</h2>
  <!-- v-if的本质 从页面中移除或者添加 dom 元素（比较耗费性能），频繁切换的元素推荐用 v-show -->
  <img v-if="isShow" src="https://pic3.zhimg.com/80/v2-b782298bd92638017147709c412ad73a_1440w.webp" alt="">

  <button @click="age+=2">成长:{{ age }}</button>
  <h3 v-if="age<5">玩泥巴</h3>
  <!-- v-else-if 及 v-else 不能单独使用需要结合 v-if -->
  <h3 v-else-if="age>=5&&age<18">偷摸去网吧</h3>
  <h3 v-else>光明正大去网吧</h3>

</template>


<!-- 样式 -->
<style scoped>
  img{
    width: 200px;
    height: 200px;
  }
</style>